<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue'

const toDoItems = ref([])
const toDoItemsComplete = ref([])


//Достать из localStorage данные, если нет, записать дефолт
if (localStorage.item === undefined || localStorage.item == '') {
  localStorage.item = []
} else toDoItems.value = localStorage.item.split(',')

if (localStorage.itemComplete === undefined || localStorage.itemComplete == '') {
  localStorage.itemComplete = []
} else toDoItemsComplete.value = localStorage.itemComplete.split(',')


//При нажатии кнопки, добавляет значение инпута в массив toDoItems
const toDoText = ref('')
let pushText = function () {
  if (toDoText.value !== '') {
    toDoItems.value.push(toDoText.value)
    toDoText.value = ''
  }
}

//Обновить LocalStorage
let updateLocalStorage = function () {
  localStorage.item = toDoItems.value
  localStorage.itemComplete = toDoItemsComplete.value
}

//Очистка toDoItems
let resetToDoItems = function () {
  toDoItems.value = []
}

//Очистка toDoItemsComplete
let resetToDoItemsComplete = function () {
  toDoItemsComplete.value = []
}

//Делает текст line-through
let lineThrough = ref([])
let doLineThrough = function (key) {
  toDoItemsComplete.value.push(toDoItems.value[key])
  toDoItems.value.splice(key, 1)
}
let doLineThroughDisable = function (key) {
  toDoItems.value.push(toDoItemsComplete.value[key])
  toDoItemsComplete.value.splice(key, 1)
}
</script>

<template>
  <div class="relative p-4 text-lg">
    <button class="text-sm absolute top-0 right-4" @click.prevent="resetToDoItems(), updateLocalStorage()"
      v-if="toDoItems != ''">
      Очистить
    </button>
    <ul class="pl-4 pt-1">
      <li class="flex justify-between border-b" v-for="(item, key) in toDoItems" ref="lineThrough">
        <p> {{ item }}</p>
        <span class="flex gap-4">
          <button class="block text-c_lilu" @click="doLineThrough(key), updateLocalStorage()">↓</button>
          <button class="block text-c_pink" @click="toDoItems.splice(key, 1), updateLocalStorage()">
            ☓
          </button>
        </span>
      </li>
    </ul>
    <div class="relative">
      <h6 class="text-sm mt-5 pl-4 font-bold" v-if="toDoItemsComplete != ''">Сделанно:</h6>
      <button class="text-sm absolute top-0 right-0" @click.prevent="resetToDoItemsComplete(), updateLocalStorage()"
        v-if="toDoItemsComplete != ''">
        Очистить
      </button>
      <ul class="pl-4">
        <li class="flex justify-between border-b" v-for="(item, key) in toDoItemsComplete">
          <p class="line-through"> {{ item }}</p>
          <span class="flex gap-4">
            <button class="block text-c_lilu" @click="doLineThroughDisable(key), updateLocalStorage()">↑</button>
            <button class="block text-c_pink" @click="toDoItemsComplete.splice(key, 1), updateLocalStorage()">
              ☓
            </button>
          </span>
        </li>
      </ul>
    </div>

    <form class="xl: mt-7 flex flex-col items-center justify-between xl:flex-row">
      <input type="text" class="w-full border pl-4 xl:w-2/3" placeholder="Новое" v-model="toDoText" maxlength="41" />
      <button class="block pt-4 text-sm xl:w-1/3 xl:pt-0" @click.prevent="pushText(), updateLocalStorage()">
        Добавить
      </button>
    </form>
  </div>
</template>

<style lang="scss">
.lineThrough {
  p {
    text-decoration: line-through;
  }

}
</style>